import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import MyListView from '../../components/MyListView/MyListView';
import Moment from 'moment';
import MyScroll from '../../components/MyScroll/MyScroll';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import {routerRedux} from "dva/router";
import {checkbox} from './findPeople.less';
import {findIndex, fenlei, noguanzhu, tishi} from './findIndex.less';
import  renwu from'../../assets/svg/renwu.svg';
import  caidan from'../../assets/svg/caidan.svg';
import dianzan from '../../assets/svg/dianzan.svg';
import dianzan1 from '../../assets/svg/dianzan1.svg';
import fenxiang1 from '../../assets/svg/fenxiang1.svg';
import gerenrenzheng from '../../assets/svg/gerenrenzheng.svg';
import geren from '../../assets/svg/geren.svg';
import qiye from '../../assets/svg/qiye.svg';
import btn1 from '../../assets/svg/btn1.svg';
import btn2 from '../../assets/svg/btn2.svg';
import PersonHomeItem from './personHomeItem';
import pinglun from '../../assets/svg/pinglun.svg';
import share from '../../assets/svg/share.svg';
import sanjiaoup from "../../assets/svg/sanjiaoup.svg";
import sanjiaod from "../../assets/svg/sanjiaod.svg";
import {evalute_madel} from "../evaluate/EvaluateListItem.less";
import {person} from "./personHome.less";
import {myHead, myHeadTwo} from "../my/myHeader.less";
import {mo} from "./publish.less";
import {IMAGE_DOMAIN, isWechat} from "../../utils/common";
import {wxShare} from "../../utils/weixinShare";




class PersonHome extends Component {
    constructor(props){
        super(props);
        this.state={
            id:this.props.match.params.data,
            modal:false,
            modal1:false,
        }
        this.AlloyTouch = null;

    }

    showModal1 = (e) => {
        this.setState({
            modal1: true,
        });
    };
    onClose1 = () => {
        this.setState({
            modal1: false,
        });
    };
    componentDidMount(){
        this.refresh().then(result=>{
            if(result.code==200&&isWechat()){
                wxShare(location.href,IMAGE_DOMAIN+result.ret.image);
            }
        });;
        if(this.props.match.params.isShow==1){
            this.setState({modal:true})
        }
    }
    refresh = () => {
        if (this.state.id==-1){
            return this.props.dispatch({ type: 'findOthers/personHomeEFF',obj:{pageNo:1} });
        }else {
            return this.props.dispatch({ type: 'findOthers/othersHomeEFF',obj:{othersId:this.state.id,pageNo:1} });
        }
    }

    loadMore = () => {
        if (this.state.id==-1){
            return this.props.dispatch({ type: 'findOthers/personHomeEFF', obj:{pageNo:this.props.findOthers.pageNo+1} });
        }else {
            return this.props.dispatch({ type: 'findOthers/othersHomeEFF', obj:{pageNo:this.props.findOthers.pageNo+1,othersId:this.state.id} });
        }
    }
    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    showModal = (e) => {
        this.setState({
            modal: true,
        });
    };
    onClose = () => {
        this.setState({
            modal: false,
        });
    }
    render() {
        const id=this.state.id;
        console.log(id)
        const {dispatch} = this.props;
        const {personHome,trendsEntities}= this.props.findOthers;
        console.log(this.props.findOthers)
        console.log(trendsEntities&&trendsEntities.length>0)
        return ( <Flex direction="column" className={person} style={{height:"100%"}}>
                <div className="myHead">
                    <WingBlank>
                        <Flex justify="between"  style={{color:"#fff",margin:".2rem 0"}}>
                            <Icon type="left" style={{width:".44rem",height:".44rem"}} onClick={()=>{
                                this.props.dispatch(routerRedux.goBack());
                            }}></Icon>
                            <div style={{fontSize:".35rem"}}>{ id==-1 ? '我的主页' : "主页" }</div>
                            <Icon type={fenxiang1.id} onClick={()=>{if(isWechat()) this.showModal1 }} style={isWechat()?{width:".44rem",height:".44rem"}:{opacity:"0",width:".44rem",height:".44rem"}}></Icon>
                        </Flex>
                        <Flex style={{margin:".5rem 0"}}>
                            <div style={{width:"1.2rem",height:"1.2rem",margin:".3rem",position:"relative"}}>
                                <NoLazyImg src={personHome.image!=undefined?personHome.image:""} style={{width:"1.2rem",height:"1.2rem",borderRadius:"100%"}}></NoLazyImg>
                                {personHome.identification?<Icon type={gerenrenzheng.id} style={{position:"absolute",bottom:"0",right:"0"}}></Icon>:""}
                            </div>
                            <div style={{width:"50%"}}>
                                <Flex style={{fontSize:".3rem",marginBottom:".3rem"}}>
                                    <div>{personHome.memberName!=undefined?personHome.memberName:"用户名称" }</div>
                                    {id==-1?personHome.identification?<div className="renzheng">个人认证</div>:<div className="renzheng" onClick={()=>{this.showModal()}}>未认证</div>:""}
                                </Flex>
                                {
                                    id == -1 ?
                                        <Flex justify="between" style={{fontSize:".27rem"}}>
                                            <div onClick={()=>{this.props.dispatch(routerRedux.push({
                                                pathname:`/findFollow`
                                            }))}}>关注 {personHome.followNum!=undefined?personHome.followNum>10000?personHome.followNum/10000+"万":personHome.followNum:0 }</div>
                                            <div onClick={()=>{this.props.dispatch(routerRedux.push({
                                                pathname:`/myFansList`
                                            }))}}>粉丝  {personHome.vermicelli !=undefined?personHome.vermicelli >10000?personHome.vermicelli /10000+"万":personHome.vermicelli :0 }</div>
                                            <div onClick={()=>{
                                                this.props.dispatch(routerRedux.push({
                                                    pathname:`/myArticle`
                                                }))
                                            }}>文章 {personHome.articlesNumber !=undefined?personHome.articlesNumber >10000?personHome.articlesNumber /10000+"万":personHome.articlesNumber :0 }</div>
                                        </Flex>
                                        :
                                        <Flex justify="between" style={{fontSize:".27rem"}}>
                                            <div>关注 {personHome.followNum!=undefined?personHome.followNum>10000?personHome.followNum/10000+"万":personHome.followNum:0 }</div>
                                            <div>粉丝  {personHome.vermicelli !=undefined?personHome.vermicelli >10000?personHome.vermicelli /10000+"万":personHome.vermicelli :0 }</div>
                                            <div onClick={()=>{
                                               this.props.dispatch({type:"findOthers/connerFollowEFF",obj:{connerId:id   }}).then(result=>{
                                                    if(result.code==200){
                                                        Toast.success(result.msg,1.5,()=>{
                                                            this.refresh();
                                                        })
                                                    }
                                                })
                                            }} style={{border:"1px solid #fff",borderRadius:".3rem",fontSize:'0.2rem',lineHeight: ".36rem",padding:'0 .3rem'}}>{
                                                personHome.isConcernUser==0 ? "关注" :"已关注"
                                            }</div>
                                        </Flex>

                                }
                            </div>
                        </Flex>
                    </WingBlank>
                </div>
                {
                    trendsEntities&&trendsEntities.length>0?  <MyListView
                        getAlloyTouch={ this.getAlloyTouch }
                        refresh={ this.refresh }
                        loadMore={ this.loadMore }
                        hasMore={ personHome.trendsPersonHomeList.pageNo * personHome.trendsPersonHomeList.pageSize < personHome.trendsPersonHomeList.totalRows  }
                        renderItem={(v,i,a)=>{
                            return <PersonHomeItem id={id} dispatch={dispatch} nowTime={personHome.nowTime} memberName={personHome.memberName} image={personHome.image}  v={v} key={i}  refresh={ this.refresh }></PersonHomeItem>
                        }}
                        data={ trendsEntities }>
                    </MyListView>:<div className={noguanzhu}>
                        <div className="guanzhuLogo"></div>
                        <div style={{color:"#999",marginTop:".3rem"}}>还没有发动态呦!</div>
                    </div>
                }
                <Modal
                    popup
                    visible={this.state.modal}
                    onClose={this.onClose}
                    className={mo}
                    animationType="up"
                    style={{height:"100%"}}
                >
                <Flex style={{width:"100%",marginTop:"1.5rem",fontSize:".32rem"}} justify="center">
                    请选择认证类型
                </Flex>
                    <Flex style={{width:"100%",marginTop:"1.5rem"}} justify="center">
                        <Icon type={geren.id} style={{width:"2rem",height:"2rem"}} onClick={()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname:`/attestation/${personHome.memberId}/${"geren"}`
                            }))
                        }}></Icon>
                    </Flex>
                    <Flex style={{width:"100%",marginTop:".5rem",fontSize:".3rem"}} justify="center">
                       个人认证
                    </Flex>
                    <Flex style={{width:"100%",marginTop:"1.5rem"}} justify="center">
                        <Icon type={qiye.id} style={{width:"2rem",height:"2rem"}} onClick={()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname:`/attestation/${personHome.memberId}/${"qiye"}`
                            }))
                        }}></Icon>
                    </Flex>
                    <Flex style={{width:"100%",marginTop:".5rem",fontSize:".3rem"}} justify="center">
                        企业认证
                    </Flex>
                <Flex style={{position:"fixed",bottom:"0",width:"100%",padding:".2rem 0"}} justify="center">
                    <Icon type="cross" onClick={()=>{this.onClose()}}></Icon>
                </Flex>
                </Modal>
                <Modal
                    popup
                    visible={this.state.modal1}
                    onClose={this.onClose1}
                    // animationType="slide-down"
                    className={tishi}
                    maskClosable={true}
                    transparent={true}
                >
                    <Flex justify="end" style={{width:"100%"}}>
                        <Icon type={btn2.id} style={{width:"4rem",height:"3rem",position:"relative",bottom:".5rem"}}></Icon>
                    </Flex>
                    <Flex justify="center" style={{width:"100%",marginTop:"3.5rem"}}>
                        <Icon type={btn1.id} style={{width:"3rem",height:"3rem"}} onClick={this.onClose1}></Icon>
                    </Flex>
                </Modal>
            </Flex>

        )


    }
}

export default connect(({ findOthers }) => ({ findOthers}))(PersonHome);